<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>img</title>
	<style type="text/css">
	.imgs{
		position: relative;
		width:300px;
		height:100px;
		overflow: hidden;
		cursor: pointer;
		transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-moz-transition:all 0.5s ease; 
	}

	.imgs:hover .left,.imgs:hover .right{
		display: block;
	}


	.btns{
		position: absolute;
		right:124.5px;
		bottom: 0px;
		height:10px;
		z-index: 100;
	}
	.left,.right{
		position: absolute;
		top:35px;
		width:30px;
		height:30px;
		border-radius:30px; 
		text-align: center;
		line-height:30px;
		cursor: pointer;
		color:white;
		background: black;
		opacity: 0.3;
		transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
		-moz-transition:all 0.5s ease; 
		display: none;
	}

	.imgs .left{
		left:0px;
	}

	.imgs .right{
		right:0px;
	}

	.left:hover,.right:hover{
		opacity: 0.8;
		font-weight: 700;
	}
	.btn{
		border: 1px #eee solid;
		height:5px;
		width:5px;
		margin-right:10px;
		border-radius: 5px;
		float:left;
		background: #eee;
	}
	.on{
		background: orange;
		border: 1px orange solid;
	}
	</style>
</head>
<body>
<div class="imgs">
	<div class="left"><</div>
	<div class="right">></div>
	<img src="./semantic/logo.jpg" width="300px" height="100px"/>
	<img src="./semantic/head.jpg" width="300px" height="100px">
	<img src="./semantic/image.png" width="300px" height="100px">
	<img src="./semantic/image.png" width="300px" height="100px">
	<div class="btns">
		<div class="btn on"></div>
		<div class="btn"></div>
		<div class="btn"></div>
		<div class="btn"></div>
	</div>
</div>
<span class="test"></span>
</body>
<script type="text/javascript" src="./semantic/js/jquery.min.js"></script>
<script type="text/javascript">
var index = 0;
var timer;
var mg  = $(".imgs img");
var btn = $(".btns .btn");
var len = mg.length;

function Scoll(n){
	mg.eq(n).fadeIn(200).siblings("img").fadeOut(200);
	btn.eq(n).addClass('on').siblings('div').removeClass('on');

}

/**
 * 点击标签切换
 */
$(".btn").click(function(event) {
	var n = $(this).index();
	index = n;
	mg.eq(n).fadeIn(200).siblings("img").fadeOut(200);
	btn.eq(n).addClass('on').siblings('div').removeClass('on');
});

function setTimer(){
	timer = setInterval(function(){
		Scoll(index);
		index++;
		if(index == len){
			index = 0;		
		}
	},3000);
}
/**
 *左切换
 *
 */
$(".left").click(function(){
	if(index == 0){
		index = len;
	}
	index--;
	Scoll(index);
});

/**
 * 右切换
 */
$(".right").click(function(){
	Scoll(index);
	index++;
	if(index == len){
		index = 0;
	}
});

/**
 * 鼠标悬浮时停止计时
 */
$('.imgs').mouseover(function(){
	clearInterval(timer);
});

/**
 * 鼠标离开时开始计时
 */
$('.imgs').mouseout(function(){
	setTimer();
});

/**
 * 启动计时器
 */
$(document).ready(function(){
	setTimer();
})
</script>
</html>